<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="./newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="./newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="./newcj/fonts/iconfont.css?v=2016070717">
    <script src="./newcj/js/jquery.min.js"></script>
    <script src="./newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="./newcj/js/dist/flexible/flexible.debug.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body ontouchstart>
<div class='fui-page-group'>
<div class='fui-page chatDetail-page'>
    <div class="chat-header flex">
        <i class="icon icon-toleft t-48"></i>
        <span class="shop-titlte t-30">商店</span>
        <span class="shop-online t-26"></span>
        <span class="into-shop">进店</span>
    </div>
    <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
        <div class="chat-content">
            <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
            <p class="chat-time"><span class="time">2017-11-12</span></p>

<!--            <div class="chat-text section-left flex">-->
<!--            <span class="char-img" style="background-image: url(./newcj/img/123.jpg)"></span>-->
<!--            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>你好</span>-->
<!--        </div>-->

<!--            <div class="chat-text section-right flex">-->
<!--            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>你好</span>-->
<!--            <span class="char-img" style="background-image: url(./newcj/img/132.jpg)"></span>-->
<!--           </div>-->

        </div>
    </div>
    <div class="fix-send flex footer-bar">
        <i class="icon icon-emoji1 t-50"></i>
        <input class="send-input t-28" maxlength="200">
        <input type="file" name="pic" id="file" style="display: none">
        <i class="icon icon-add image_up t-50" style="color: #888;"></i>
        <span class="send-btn">发送</span>
    </div>
</div>
</div>

<script>
    var from_head = "";
    var to_head = "";
    var to_name = "";
    var online = 0; // 默认全局变量,不在线

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return pair[1];
            }
        }
        return(false);
    }

    // 获取 服务器端的ID
    var fromid = getQueryVariable('fromid'); // 我的ID
    var toid = getQueryVariable('toid');  // 接收人的ID
    console.log(fromid,toid)

    // 连接websocket服务器
    var ws = new WebSocket("ws://127.0.0.1:8282");

    // 接收服务器发送消息
    ws.onmessage = function (e) {
        console.log(e.data); // 打印服务器端传递来的数据

        // 接收到的json格式进行转换成对象
        var message = eval("("+e.data+")");
        // console.log(message);  获取到了后台的json数据

        switch (message.type) {
            case "init":
                var bild = '{"type":"bind","fromid":"'+fromid+'"}';
                // 向服务端发送绑定客户端请求
                ws.send(bild);
                get_head(fromid,toid);
                get_name(toid);
                message_load();
                // 向 GatewayWorker 发送数据查看 toid 是否在线,并标明当前ID
                var online = '{"type":"online","toid":"'+toid+'","fromid":"'+fromid+'"}';
                // 发送数据到 GatewayWorker
                ws.send(online);
                return;
            case "text":
                if(toid==message.fromid){
                    // 展示左侧聊天信息
                    $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                        '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                        '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+message.data+'</span>\n' +
                        '        </div>');
                    $(".chat-content").scrollTop(3000);
                }
                return;
            // 解决发送来的图片类型
            case "say_img":
                // 展示左侧聊天信息
                $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                    '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                    '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="D:\\phpstudy_pro\\WWW\\Workerman\\tt.cc\\tla\\public\\uploads\\'+message.img_name+'"></span>\n' +
                    '        </div>');
                $(".chat-content").scrollTop(3000);
                return;
            case "save":
                save_message(message);
                if (message.isread==1){
                    $(".shop-online").text("在线");
                }else{
                    $(".shop-online").text("不在线");
                }
                return;
            case "online":
                if(message.status==1){
                    online = 1;
                    $(".shop-online").text("在线");
                }else{
                    online = 0;
                    $(".shop-online").text("不在线");
                }
        }

    }

    // 点击发送按钮
    $(".send-btn").click(function () {
        // 获取input框输入内容
        var text = $(".send-input").val();

        // fixbug 修复 发送数据为空返回
        if(text==""){
            return;
        }

        // 由于发送的数据会很多，所以取消直接采用text文本传输
        var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';

        // 展示右侧聊天信息
        $(".chat-content").append('<div class="chat-text section-right flex">\n' +
            '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+text+'</span>\n' +
            '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
            '           </div>');

        $(".chat-content").scrollTop(3000);

        // 客户端发送数据给服务端
        ws.send(message);
        // 清空input的内容
        $(".send-input").val("");
    });

    var API_URL = "http://tt.cc/api/";
    // 接收 workman 发送来的数据 message
    function save_message(message){
        // post 发送数据
        $.post(
            API_URL+"saveMessages",
            message,
            // 接收发送数据返回的数据
            function(){

            },'json'
        );
    }
    function get_head(fromid,toid){
        $.post(
            API_URL+"get_head",
            {"fromid":fromid,"toid":toid},
            // 接收发送数据返回的数据
            function(e){
                console.log(e)
                from_head = e.fromHead;
                to_head = e.toHead;
            },'json'
        );
    }
    function get_name(toid){
        $.post(
            API_URL+"get_name",
            {"toid":toid},
            // 接收发送数据返回的数据
            function(e){
                console.log(e)
                to_name = e.toname;
                $(".shop-titlte").text("与 "+to_name+" 聊天中...");
            },'json'
        );
    }
    // 获取聊天记录
    function message_load(){
        $.post(
            API_URL+"message_load",
            {"fromid":fromid,"toid":toid},
            // 接收发送数据返回的数据
            function(e){
                console.log(e)
                $.each(e,function(index,content){
                    // 我的ID信息展示在右边，接收的信息展示左侧
                    if(fromid==content.fromid){
                        // 我发送的 type 是 2 的就是图片
                        if(content.type==2){
                            $(".chat-content").append('<div class="chat-text section-right flex">\n' +
                                '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="D:\\phpstudy_pro\\WWW\\Workerman\\tt.cc\\tla\\public\\uploads\\'+content.content+'"></span>\n' +
                                '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
                                '           </div>');
                        }else{
                            // 展示右侧聊天信息
                            $(".chat-content").append('<div class="chat-text section-right flex">\n' +
                                '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+content.content+'</span>\n' +
                                '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
                                '           </div>');
                        }
                    }else{
                        // 接收我发送的 type 是 2 的图片
                        if(content.type==2){
                            $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                                '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                                '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="D:\\phpstudy_pro\\WWW\\Workerman\\tt.cc\\tla\\public\\uploads\\'+content.content+'"></span>\n' +
                                '        </div>');
                        }else{
                            // 展示左侧聊天信息
                            $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                                '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                                '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+content.content+'</span>\n' +
                                '        </div>');
                        }

                    }
                });
                $(".chat-content").scrollTop(3000);
            },'json'
        );
    }

 $(".image_up").click(function(){
     $("#file").click();
 });

    $("#file").change(function(){
        // 打印 file文件看看
        // console.log($("#file")[0].file);
        console.log($("#file"));

        formdata = new FormData();
        formdata.append("fromid",fromid);
        formdata.append("toid",toid);
        formdata.append("online",online);
        formdata.append("file",$("#file")[0].files[0]);

        $.ajax({
            url:API_URL+"uploadimg",
            type:"POST",
            cache:false,// 禁掉缓存
            data:formdata,
            dataType:"json",// 接收json类型
            processData:false,//禁止类型转换成对象形式
            contentType:false,// 去掉默认编码格式
            success:function(data,status,xhr){
                // console.log(data);
                if(data.status=="ok"){
                    // 展示右侧聊天信息
                    $(".chat-content").append('<div class="chat-text section-right flex">\n' +
                        '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="D:\\phpstudy_pro\\WWW\\Workerman\\tt.cc\\tla\\public\\uploads\\'+data.img_name+'"></span>\n' +
                        '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
                        '           </div>');

                    $(".chat-content").scrollTop(3000);
                    // 图片发送给 WebSocket 服务器
                    var message = '{"data":"'+data.img_name+'","fromid":"'+fromid+'","toid":"'+toid+'","type":"say_img"}';
                    ws.send(message);
                    $("#file").val();// 上传成功后清空input框的图片
                }else{
                    console.log(data.status);
                }
            }
        });

    });

</script>

</body>
</html>
